<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>珍惜遇见</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/a.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <!-- start your project here -->
  <!--Main Navigation-->
  <header>



    <nav class="navbar navbar-expand-lg navbar-dark warning-color fixed-top">
      <!-- Navbar brand -->
      <div class="container">
        <!-- 请注意, 这是额外加的 div 开始标签 -->
        <!-- Links -->
        <ul class="navbar-nav mr-auto smooth-scroll">
          <li class="nav-item">
            <a class="nav-link" href="#intro">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#初遇">初遇 </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#examples">坠入</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#gallery">热恋</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">幻想</a>
          </li>
        </ul>
    </nav>
    <!--/.Navbar-->
    </div> <!-- 请注意, 这是额外加的 div 结束标签 -->
    <!--Mask-->



    <!--Mask-->


    <class>
      <div id="intro" class="view">

        <!-- 添加了.container-fluid 容器以利用栅格进行布局 -->
        <div class="container-fluid d-flex align-items-center justify-content-center h-100 mb-5">
          <!-- 新添加的 div, 表示栅格中的行 -->
          <div class="row d-flex justify-content-center text-center ">
            <!-- 新添加的 div, 表示栅格中的列 -->
            <div class="col-md-10 mb-5">
              <h3 class="display-4 font-weight-bold white-text pt-5  "> </h3>
              <!-- Heading -->
              <h3 class="display-4 font-weight-bold orange-text  pt-5 ">遇到就请珍惜我们的缘分吧！</h3>

              <!-- Divider -->
              <hr class="hr-light ">
              <h4 class="red-text my-4"></h4>
              <h4 class="red-text my-4"> </h4>
              <h4 class="red-text my-4">









              </h4>
              <!-- Description -->
              <h4 class="red-text my-4">We shall always save a place for ourselves, only for ourselves. Andthen begin
                to love. Have no idea of what it is, who he is, how to loveor how long it will be. Just wait for one
                love. Maybe no one will comeout, but this kind of waiting is the love itself.</h4>
              <button type="button" class="btn btn-orange">Read more<i class="fas fa-book ml-2"></i></button>

            </div>

          </div>

        </div>

      </div>
    </class>
    </div>
    <!--/.Mask-->
  </header>

  <!--Main Navigation-->

  <!--Main layout-->

  <main class>
    <!--Main container-->
    <div id="intro2" class="view">
      <div class="container">
        <!--Grid row 1-->

        <section id="初遇">
          <div class="col-lg-5 mb-5 ">

          </div>
          <div class="col-mb-5 ">
            <h5 class="display-4 font-weight-bold orange-text  pt-5 mb-5 ">初遇</h5>
          </div>
          <div class="row ">


            <!--Grid column 1-->
            <div class="col-lg-7  mb-4">
              <div class="view overlay z-depth-1-half">
                <img src="https://img0.baidu.com/it/u=3781671665,3017394737&fm=26&fmt=auto&gp=0.jpg"
                  class="card-img-top" alt="">
                <div class="mask rgba-white-light"></div>
              </div>
            </div>

            <!--Grid column-->
            <div class="col-lg-1 orange-text mb-4">

            </div>
            <!--Grid column 2-->
            <div class="col-lg-4 orange-text mb-4 ">
              <h2>遇见爱情</h2>
              <hr>
              <p class="  font-weight-bold orange-text  pt-4 ">
                那一年的那一天，我们相遇了。正如爱情的到来，正如我对你的一见钟情。就这样我们，默然相爱，寂静喜欢。你叫我傻子，我叫你笨蛋。因为我不知道，下一辈子是否还能遇见你，所以我今生才会，那么努力，把最好的给你，影子在下雨天也会缺席，可是，无条件会陪你的人，狂风豪雨都一直会在

              </p>
              <a href="#" class="btn btn-orange">回到开始</a>
            </div>
            <!--Grid column-->

            <!--Grid row-->
        </section>
      </div>
    </div>



    <div id="intro5" class="view">
      <div class="container">
        <section id="坠入">

          <div class="row">

            <!--Grid column-->
            <div class="col-lg-4 col-md-12 mb-4">

              <h2 class="font-weight-bold orange-text  pt-4"> 对你告白</h2>

              <p class="  font-weight-bold orange-text  pt-4  ">
                人生中有很多的无可奈何，但只要在心中有一个人在牵挂，在思念，也会变成人生中的最幸福。爱要怎么说得出口?我和你是生活在完全不同的两个城市的人，命运真的很会开玩笑，我就偏偏认识了你，偏偏爱上了你，爱上你，感觉是甜蜜的。

                我喜欢一个人静静的想你，想着你的微笑。虽然我们认识的时间不长，但是我却珍惜跟你在一起的每一天。

                遇见你需要运气，爱上你却要勇气，你我走到这一步是多么不容易啊!

                人海茫茫，红尘相遇不一定能在一起，在一起的不一定成为情侣，有多少人只能做兄妹，又有多少人只能等来生，我真的很想和你在一起。

                上课的时候，休息的时候，甚至连晚上做梦都会想着你，梦见你，感觉你是如此的亲切。

                在寂寞的漫漫长夜，你可曾听见我的叹息?我是真的很爱你，我好想大声地说：我爱你，亲爱的你，我是真的不顾一切爱上了你。让我忘了我自己，我不怕爱的路上遇到暴风骤雨，我会证明你的选择没有错，我可以让你有肩膀依靠。



              </p>
              <a href="#" class="btn btn-orange">回到开始</a>
            </div>

            <div class="col-lg-8 col-md-12 mb-4">
              <div class="view overlay z-depth-1-half mb-5 ">
                <img
                  src="https://pics2.baidu.com/feed/4ec2d5628535e5dd88efa4a4439217e9cf1b6260.jpeg?token=bd151e3fc4ab7aaa9d222cab21292a25"
                  alt="MDB Logo" width="800" height="600">
                <div class="mask rgba-white-light"></div>
              </div>
            </div>
          </div>




        </section>
      </div>
    </div>




    <div id="intro3" class="view">
      <section id="gallery">

        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 col-md-12 mb-4">

            <!--Card-->
            <div class="card">

              <!--Card image-->
              <div class="view overlay">
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190417%2F5af537631740449d8e312c3e11f85843.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620469191&t=1d57656a9f5a38fa47b89143835f62ad"
                  class="card-img-top" alt="">
                <a href="#">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>

              <!--Card content-->
              <div class="card-body">
                <!--Title-->
                <h4 class="card-title">喜欢你</h4>
                <!--Text-->
                <p class="card-text">喜欢就去表白 大不了连朋友都做不成 做朋友有什么用 我又不缺朋友 我缺你。

                  If you like it, you can't even be a friend. What's the use of being a friend? I don't lack friends. I
                  lack you.</p>

                <a href="#!" class="btn btn-warning">回到开始</a>
              </div>

            </div>
            <!--/.Card-->

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-12 mb-4">

            <!--Card-->
            <div class="card">

              <!--Card image-->
              <div class="view overlay">
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg12.360buyimg.com%2Fn12%2Fjfs%2Ft184%2F277%2F1983032047%2F187077%2F35ae3da3%2F53be76b6Nae836b95.jpg&refer=http%3A%2F%2Fimg12.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620471984&t=4a5fd14056c5382130e98ff27634cd9b"
                  class="card-img-top " alt="">
                <a href="#">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>

              <!--Card content-->
              <div class="card-body">
                <!--Title-->
                <h4 class="card-title">勇敢爱</h4>
                <!--Text-->
                <p class="card-text">你知道吗 我不想做你的路人 我想做你余生故事里的人。

                  You know, I don't want to be your passer-by. I want to be your story for the rest of my life.</p>
                <a href="#" class="btn btn-warning">回到开始</a>
              </div>

            </div>
            <!--/.Card-->

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-12 mb-4">

            <!--Card-->
            <div class="card">

              <!--Card image-->
              <div class="view overlay">
                <img src="https://img0.baidu.com/it/u=2924707018,3493813635&fm=26&fmt=auto&gp=0.jpg"
                  class="card-img-top" alt="">
                <a href="#">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>

              <!--Card content-->
              <div class="card-body">
                <!--Title-->
                <h4 class="card-title">余生是你</h4>
                <!--Text-->
                <p class="card-text">我写了三行字. 爱要藏在哪里才适合，你有能否一眼便知。

                  I wrote three lines. Where is the right place to hide love? Can you tell at a glance?</p>
                <a href="#" class="btn btn-warning">回到开始</a>
              </div>

            </div>
            <!--/.Card-->

          </div>
          <!--Grid column-->

        </div>

      </section>
      <!--Section: Gallery-->


  </main>
  <!--Main layout-->


  <!-- Footer -->
  <footer class="page-footer font-small warning-color pt-4 mt-4">

    <!-- Footer Links -->
    <div class="container-fluid text-center text-md-left">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-6 mt-md-0 mt-3">

          <!-- Content -->
          <h5 class="text-uppercase">Footer Content</h5>
          <p>Here you can use rows and columns here to organize your footer content.</p>

        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none pb-3">

        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">fa-facebook-f</a>
            </li>
            <li>
              <a href="#!">fa-bicycle</a>
            </li>
            <li>
              <a href="#!">fa-pencil-alt</a>
            </li>
            <li>
              <a href="#!">fa-camera-retro</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->I

  <!--Footer-->
  <!-- end your project here -->
</body>

</html>